<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>12354山卡拉火车网-注册页面</title>
</head>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}" media="all">
<!--    导入bootstrap.js之前要先导入依赖的jquery-->
<script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/moment-with-locales.js}"></script>
<body>

<!-- 顶部logo跟登陆导航-->
<div th:insert="components/public/header :: html"></div>

<br>
<head>
    <div id="step">
        <span class="one active">1 填写账号信息</span>
        <span class="two">2 确认个人信息</span>
        <span class="three ">3 确认注册</span>
    </div>
</head>
<br>
<div class="container">
    <br>

    <center><h3> 请填写相关信息 </h3></center>

    <div class="panel panel-default">
        <div class="panel-body" style="border: solid rgba(173, 172, 172, 0.562) 1px; border-radius: 3px; ">
            <style>

                label {
                    font-size: 17px;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                .msg_top {
                    margin-top: 7px;
                }

                /* 字体无法被选中 */
                .select {
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

            </style>
            <form class="form-horizontal" id="form_register" action="/user/register" method="post">
                <div id="step1">
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <!-- 用户名 -->
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label ">用户名:</label>
                        <div class="col-sm-7">
                            <input type="email" class="form-control" id="username" name="username" placeholder="请输入用户名">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_username"></div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <!-- 密码 -->
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="请输入密码">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_password"></div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <!-- 确认密码 -->
                    <div class="form-group">
                        <label for="confirm_password" class="col-sm-2 control-label">确认密码:</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="confirm_password" placeholder="请再次输入密码">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_confirm_password"></div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <!-- 邮箱 -->
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱:</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_email"></div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>


                    <!-- 手机号 -->
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label">手机号码:</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control identify" id="phone" name="phone"
                                   placeholder="请输入您的手机号码">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_phone"></div>
                    </div>

                    <div class="empty-line"><span>&nbsp;</span></div>
                    <!-- 政策条款 -->
                    <div class="row">
                        <div class="col-md-12 col-md-offset-3 col-sm-12 col-sm-offset-2">
                            <div class="form-group">
                                <div class="row">
                                    <div class="checkbox col-sm-3 col-md-3" id="agree">
                                        <label for="agree1">
                                            <input type="checkbox" id="agree1">
                                            <span class="select">我已经阅读并同意</span>
                                        </label>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-md-pull-1"
                                         style="margin-top: 6px; margin-right: 12px;">
                                        <a class="text-info"
                                           style="text-decoration: none; font-size: 18px;"><strong>政策条款</strong></a>
                                    </div>
                                    <div class="col-md-2 col-md-pull-2 col-sm-4 col-sm-pull-2" style="margin-top: 6px;">
                                        <small>( 由山卡拉股份有限公司制定 )</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group bot">
                        <div class="row">
                            <div class="col-sm-1 col-sm-offset-5 btn btn-primary" style="width: 120px;" id="nextStep">
                                <div>
                                    下 一 步
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--                下面是另一页-->
                <div id="step2">
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label ">请上传身份证照</label>
                        <div class="col-sm-7">
                            <input type="file" class="form-control" id="images" placeholder="请输入用户名">
                        </div>
                        <div class="btn btn-primary" id="upload">认证信息</div>
                        <div class="col-sm-3 msg_top" id="msg_img1"></div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <div class="" style="color: #3B99FC">
                        <center>
                            <h3 id="ocr-info">&nbsp;</h3>
                        </center>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>

                    <div class="form-group bot">
                        <div class="row">
                            <div class="col-sm-offset-3 col-sm-2 col-md-offset-4 col-md-1">
                                <div class="btn btn-default" style="width: 120px;" id="backStep2">
                                    返 回
                                </div>
                            </div>
                            <div class="col-sm-1 col-sm-offset-1 btn btn-primary" style="width: 120px;" id="nextStep2">
                                下 一 步
                            </div>
                        </div>
                    </div>
                    <script>
                        $("#upload").click(function () {
                            let data = new FormData();
                            let len = $('#images')[0].files.length;
                            for(let i =0;i<len;i++) {
                                let file = $('#images')[0].files[i];
                                data.append('image', file) //将图片信息file保存到该对象
                                data.append('type', 'QUICK') //定义方式
                            }

                            if (len===0) {
                                console.log('未上传图片！')
                                alert("未上传图片！");
                            } else {

                                $('#ocr-info').html('正在认证, 请稍后...')

                                $.ajax({
                                    url:'http://localhost:8087/my/ocr/PRECISE',
                                    type:'POST',
                                    data:data,
                                    processData: false, //建议添加，否则值传可能不到对应url
                                    contentType: false, //建议添加，否则值可能传不到对应url
                                    success:function(resp){

                                        console.log(resp);
                                        info = resp.data
                                        $('#birthday').val(info.birthday)
                                        $('#identify').val(info.id)
                                        $('#realname').val(info.realName)
                                        switch (info.gender) {
                                            case '男':
                                                $('#male').attr('checked','true')
                                                $('#female').attr('checked','false')
                                                break;
                                            case '女':
                                                $('#male').attr('checked','false')
                                                $('#female').attr('checked','true')
                                        }
                                        $('#ocr-info').html('认证成功!')
                                        //触发校验事件
                                        $('#birthday').blur()
                                        $('#identify').blur()
                                        $('#realname').blur()

                                        setTimeout(function (){
                                            $('#nextStep2').click()
                                        },500)
                                    },
                                    error:function(resp){
                                        console.log(resp);
                                        $('#result').html(resp);
                                        alert("失败")
                                    }
                                });

                            }

                        });
                    </script>
                </div>

                <!--                上传成功后, 显示具体信息-->
                <div id="step3">
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <!-- 性别 -->
                    <div class="form-group">
                        <label for="male" class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-7">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="male" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="female" value="0" checked="checked"> 女
                            </label>
                        </div>
                    </div>

                    <!-- 出生日期 -->
                    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
                          rel="stylesheet">
                    <div class="empty-line"><span>&nbsp;</span></div>
                    <div class="form-group">
                        <label for="birthday" class="col-sm-2 control-label">
                            出生日期:</label>
                        <div class="col-sm-7">
                            <!--指定 date标记-->
                            <div class='input-group date' id='datetimepicker1'>
                                <input type='text' name="birthday" id="birthday" placeholder="请选择日期"
                                       class="form-control"/>
                                <span class="input-group-addon" id="date_btn_01">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                            </div>
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_birthday">
                        </div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>

                    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
                          rel="stylesheet">
                    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker1').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn')
                            });
                            $('#datetimepicker2').datetimepicker({
                                format: 'YYYY-MM-DD hh:mm',
                                locale: moment.locale('zh-cn')
                            });
                        });
                    </script>

                    <!-- 真实姓名 -->
                    <div class="form-group">
                        <label for="realname" class="col-sm-2 control-label">真实姓名:</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="realname" name="realname"
                                   placeholder="请输入您的真实姓名">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_realname"></div>
                    </div>
                    <div class="empty-line"><span>&nbsp;</span></div>

                    <!-- 身份证号 -->
                    <div class="form-group">
                        <label for="identify" class="col-sm-2 control-label">身份证号:</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control identify" id="identify" name="identify"
                                   placeholder="请输入您的身份证号码">
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_identify"></div>
                    </div>

                    <div class="empty-line"><span>&nbsp;</span></div>

                    <!--                验证码 -->
                    <div class="form-group">
                        <label for="checkCode" class="col-sm-2 control-label">验证码:</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control identify" id="checkCode" name="checkCode"
                                   placeholder="请输入验证码">
                        </div>
                        <div class="col-sm-3">
                            <a href="javascript:void(0);" title="看不清?点击换一张">
                                <img id="checkCodeImg" th:src="@{/public/getImage}" alt="无法加载图片请重试!"
                                     onclick="changeImg()">
                            </a>
                        </div>
                        <div class="col-sm-3 msg_top" id="msg_checkCode"></div>
                        <script>
                            $('#checkCodeImg').click(
                                function () {
                                    let img_ = $("#checkCodeImg");
                                    let src = "/public/getImage?" + new Date().getTime();
                                    img_.attr("src", src);
                                }
                            );
                        </script>
                    </div>
                    <div class="empty-line">
                        <span>&nbsp;</span>
                    </div>

                    <!-- 重置 注册 按钮 -->
                    <div class="form-group bot">
                        <div class="row">
                            <div class="col-sm-offset-3 col-sm-2 col-md-offset-4 col-md-1">
                                <div class="btn btn-default" style="width: 120px;" id="backStep3">
                                    返 回
                                </div>
                            </div>
                            <div class="col-sm-1 col-sm-offset-1 btn btn-primary" style="width: 120px;" id="submit">
                                <div>
                                    注册
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 这是注册错误提示信息框 -->
                    <div class="row">
                        <div class="col-md-2 col-md-push-4 col-sm-5">
                            <div id="msg_submit"></div>
                        </div>
                    </div>
                </div>


            </form>

            <script type="text/javascript">
                var reg = /^[0-9a-zA-Z]*$/;
                var flags = [false, false, false, false, false, false, false, false, false];

                // 这是修改验证状态的方法
                function changeFlag(obj, flag) {
                    //通过切割消息框的id来获得 是什么种类的信息需要修改
                    let type = obj.attr('id').split('_')[1];
                    // alert(type)
                    switch (type) {
                        case 'username':
                            flags[0] = flag;
                            break;
                        case 'password':
                            flags[1] = flag;
                            break;
                        case 'confirm':
                            flags[2] = flag;
                            break;
                        case 'email':
                            flags[3] = flag;
                            break;
                        case 'birthday':
                            flags[4] = flag;
                            break;
                        case 'realname':
                            flags[5] = flag;
                            break;
                        case 'identify':
                            flags[6] = flag;
                            break;
                        case 'phone':
                            flags[7] = flag;
                            break;
                    }
                }

                //输出信息方法 1.传入要输出的信息框 2.要输出的信息 3.是正确还是错误
                function outMsg(msg_div, msg, flag) {
                    if (flag)
                        msg_div.html('<span style="color: green;"><span class="glyphicon glyphicon-ok"></span> ' + msg + '</span>');
                    else
                        msg_div.html('<span style="color: red;"><span class="glyphicon glyphicon-remove"></span> ' + msg + '</span>');
                    changeFlag(msg_div, flag);
                }

                // 要绑定div中具体的选项框元素, 不能绑定外面的div, 否则会执行两次
                var last = false;
                $('#agree1').click(function () {
                    last = !last;
                    if (last)
                        flags[8] = true;
                    else
                        flags[8] = false;
                })

                $('#phone').blur(function () {
                    let phone_reg = /^1[3-9]\d{9}$/;
                    let phone = $('#phone').val();
                    let msg = $('#msg_phone');
                    if (phone == "") {
                        outMsg(msg, '手机号码不能为空', false);
                    } else if (!phone_reg.test(phone)) {
                        outMsg(msg, '请输入正确的手机号码', false);
                    } else {
                        outMsg(msg, '', true);
                    }
                })

                $('#username').blur(function () {
                    let username = $('#username').val();
                    let msg = $('#msg_username');
                    if (username == "") {
                        outMsg(msg, '用户名不能为空', false);
                    } else if (!reg.test(username)) {
                        outMsg(msg, '用户名只能由字母或数字组成', false);
                    } else {
                        $.ajax({
                            url: '/user/checkName/' + username,
                            type: 'POST',
                            success: function (resp) {
                                if (resp.flag)
                                    outMsg(msg, '', true)
                                else
                                    outMsg(msg, resp.msg, false)
                            }
                        })
                    }
                });

                $('#password').blur(function () {
                    let password = $('#password').val();
                    let msg = $('#msg_password');
                    if (password == "" || password == null)
                        outMsg(msg, '密码不能为空', false);
                    else if (!reg.test(password))
                        outMsg(msg, '密码只能由字母和数字组成', false)
                    else
                        outMsg(msg, '', true);
                });

                $('#confirm_password').blur(function () {
                    let password = $('#password').val();
                    let confirm_password = $('#confirm_password').val();
                    let msg = $('#msg_confirm_password');
                    if (confirm_password == "")
                        outMsg(msg, '确认密码不能为空', false);
                    else if (confirm_password != password)
                        outMsg(msg, '两次密码输入不相同', false);
                    else
                        outMsg(msg, '', true)
                });

                $('#email').blur(function () {
                    let email_reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                    let msg = $('#msg_email');
                    let email = $('#email').val();
                    if (!email_reg.test(email))
                        outMsg(msg, '请输入正确的邮箱', false);
                    else
                        outMsg(msg, '', true);
                });

                $('#birthday').blur(function () {
                    let current = new Date();
                    let birthday = new Date(Date.parse($('#birthday').val()));
                    let msg = $('#msg_birthday');
                    if (birthday != "" && birthday < current) {
                        outMsg(msg, '', true);
                    } else {
                        outMsg(msg, '请选择有效的时间', false);
                    }
                });

                $('#realname').blur(function () {
                    let msg = $('#msg_realname');
                    let realname = $('#realname').val();
                    if (realname == "")
                        outMsg(msg, '请填写真实姓名', false);
                    else
                        outMsg(msg, '', true);
                });

                $('#identify').blur(function () {
                    let identify_reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;
                    let msg = $('#msg_identify');
                    let identify = $('#identify').val();
                    if (!identify_reg.test(identify))
                        outMsg(msg, '请输入正确身份证号', false);
                    else
                        outMsg(msg, '', true);
                });

                $('#submit').click(function () {
                    for (let i = 0; i < flags.length; i++) {
                        console.log(flags[i]);
                    }
                    let msg = $('#msg_submit');
                    for (index = 0, len = flags.length; index < len; index++) {
                        if (!flags[index]) {
                            msg.html('<span style="color: red;"><span class="glyphicon glyphicon-remove"></span>请正确填写以上信息</span>');
                            return;
                        }
                    }

                    $.ajax({
                        url: "/user/register",
                        method: 'POST',
                        data: $('#form_register').serialize(),
                        success: function (msg) {
                            if (msg.flag) {
                                //说明注册成功, 跳转页面, 注意跳转的是带有提示信息的登陆页面,
                                //url是一个接口
                                location.href = msg.url;
                            } else {
                                $('#msg_submit').html('<span style="color: red;"><span class="glyphicon glyphicon-remove"></span>' + msg.msg + '</span>');
                            }
                        }
                    })
                })
            </script>
        </div>
    </div>
</div>
<footer style="margin-top: 0px">
    <!--页脚-->
    <div th:insert="components/public/footer :: html"></div>
</footer>
<script>
    function changeActiveClass(which) {
        let c = 'active'
        $('.one').removeClass(c)
        $('.two').removeClass(c)
        $('.three').removeClass(c)
        $('.' + which).addClass(c)
    }

    $('#nextStep').click(function () {

        //校验0 1 2 3 7
        $('#username').blur()
        $('#password').blur()
        $('#confirm_password').blur()
        $('#phone').blur()
        $('#email').blur()
        if(flags[0]&&flags[1]&&flags[2]&&flags[3]&&flags[7]){
            //通过校验就跳转
            $('#step1').hide()
            $('#step2').show()
            changeActiveClass('two')
        }else{
            //提示填写信息
            alert('请按要求填写信息!')
        }

    })
    $('#nextStep2').click(function () {
        $('#step2').hide()
        $('#step3').show()
        changeActiveClass('three')
    })

    $('#backStep2').click(function () {
        $('#step2').hide()
        $('#step1').show()
        changeActiveClass('one')
    })
    $('#backStep3').click(function () {
        $('#step3').hide()
        $('#step2').show()
        changeActiveClass('two')
    })
</script>
<style>
    #step2, #step3 {
        display: none;
    }

    #step1, #step2, #step3 {
        /*min-height: 700px;*/
    }

    .empty-line {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .bot {
        margin-top: 200px;
        /*align-content: center;*/
        /*position: absolute;*/
        /*bottom: 100px;*/
        /*width: 60%;*/
    }


    #step span {
        height: 40px;
        width: 28%;
        float: left;
        margin-right: 42px;
        background: #dde1e9;
        position: relative;
        line-height: 40px;
        font-size: 20px;
        padding-left: 10px;
    }

    #step .one:after, #step .two:after {
        width: 0;
        height: 0;
        content: ' ';
        border-top: 20px solid transparent;
        border-left: 20px solid #dde1e9;
        border-bottom: 20px solid transparent;
        border-right: 20px solid transparent;
        position: absolute;
        right: -40px;
        top: 0;
    }

    #step .two:before, #step .three:before {
        width: 0;
        height: 0;
        content: ' ';
        border-top: 20px solid #dde1e9;
        border-right: 20px solid #dde1e9;
        border-left: 20px solid transparent;
        border-bottom: 20px solid #dde1e9;
        position: absolute;
        left: -40px;
        top: 0;
    }

    #step .active {
        background: #e6af0d;
        border-color: #e6af0d;
    }

    #step .active:before {
        border-top-color: #e6af0d;
        border-right-color: #e6af0d;
        border-left-color: transparent;
        border-bottom-color: #e6af0d;
    }

    #step .active:after {
        border-top-color: transparent;
        border-left-color: #e6af0d;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

</style>
</body>
</html>